<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/modules/book/front/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>查询结果</title>
    <meta name="viewport"  content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <script type="text/javascript">
        var FINAL_COUNT = ${fns:getDictValue('search','selfCountDown' ,'200')}
    </script>
    <%@ include file="/WEB-INF/views/include/common.jsp" %>
    <%@ include file="/WEB-INF/views/include/countDown.jsp" %>

    <script src="${ctxStatic}/dropload/dropload.min.js" type="text/javascript"></script>
    <link href="${ctxStatic}/dropload/dropload.css" type="text/css" rel="stylesheet"/>
    <style>
        body {
            margin: 5px;
        }

        tr {
            height: 50px;
        }

        tr td, tr th {
            height: 50px;
            line-height: 50px;
            text-align: center !important;
            vertical-align: middle !important;
        }

        .inner {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            background-color: #fff;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }

        * {
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-text-size-adjust: none;
        }

        html {
            font-size: 10px;
        }

        body {
            background-color: #f5f5f5;
            font-size: 1.2em;
        }

        .outer {
            position: absolute;
            left: 0;
            top: 119px;
            width: 100%;
            height: 90%;
            padding: 0 50px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
        }

        @-webkit-keyframes opacity {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes opacity {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
<div class="page-header">
    <div class="row">
        <div class="col-md-offset-1 col-md-9">
            <h1>智能图书馆借还系统</h1>
        </div>
    </div>
</div>
<div class="container">
    <div class="outer">
        <div class="inner">
            <div class="lists">
                <table id="contentTable" class="table table-striped table-bordered table-condensed">
                    <thead>
                        <tr style="height: 40px">
                            <th>封面</th>
                            <th>书名</th>
                            <th>ISBN</th>
                            <th>作者</th>
                            <th>分类号</th>
                            <th>出版社</th>
                            <th>书架号</th>
                            <th>可借数量</th>
                            <th width="80">操作</th>
                        </tr>
                    </thead>
                    <tbody class="data_body">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var pageNo = 1;
    var lastPage = false;
    $(function () {
        var dropload = $('.inner').dropload({
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                domNoData: '<div class="dropload-noData">暂无数据</div>'
            },
            loadDownFn: function (me) {
                if (!lastPage) {
                    $.ajax({
                        type: 'GET',
                        url: '${cts}/bookinfo/getBookinfoByPage',
                        dataType: 'json',
                        data: {
                            pageNo: pageNo, pageSize: 30,
                            bookname: "${bkBookinfo.bookname}",
                            author: "${bkBookinfo.author}",
                            classcode: "${bkBookinfo.classcode}",
                            publisher: "${bkBookinfo.publisher}"
                        },
                        success: function (data) {
                            var result = '';
                            if (data.list.length != 0) {
                                for (var i = 0; i < data.list.length; i++) {
                                    var info = data.list[i];
                                    result += "<tr>";
                                    if (info.tubiao == "") {
                                        result += "<td class='tit'><img src='${ctxStatic}/images/book-default-small.gif' width='30%'></td>";
                                    } else {
                                        result += "<td class='tit'><img src='" + info.tubiao + "' width='80%'></td>";
                                    }
                                    if (info.othername != "") {
                                        result += "    <td class='tit'>" + info.bookname + " - " + info.othername + "</td>";
                                    } else {
                                        result += "    <td class='tit'>" + info.bookname + "</td>";
                                    }
                                    var shelfName = "";
                                    if(info.bookstore.shelf){
                                        shelfName = info.bookstore.shelf.name;
                                    }

                                    result += "    <td class='tit'>" + info.isbn + "</td>"
                                            + "    <td class='tit'>" + info.author + "</td>"
                                            + "    <td class='tit'>" + info.classcode + "</td>"
                                            + "    <td class='tit'>" + info.publisher + "</td>"
                                            + "    <td class='tit'>" + shelfName + "</td>"
                                            + "    <td class='tit'>" + info.bookstore.totalCount + "</td>"
                                            + "    <td class='tit'>"
                                            + "        <a href='${cts}/bookinfo/detail?id=" + info.id + "' target='_self'>详情</a>"
                                            + "    </td>"
                                            + "</tr>";
                                }
                                pageNo++;
                                lastPage = data.lastPage;

                                $('.data_body').append(result);
                                // 每次数据加载完，必须重置
                                dropload.resetload();
                            } else {
                                $(".dropload-load").html("没有查询到数据");
                            }
                        },
                        error: function (xhr, type) {
                            //alert('Ajax error!');
                            // 即使加载出错，也得重置
                            dropload.resetload();
                        }
                    });
                }

                if(lastPage){
                    $(".dropload-load").html("没有数据了");
                }
            }
        });
    });
</script>
</body>

</html>